<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue介绍</title>

</head>
<body>
<div id="app">
  <div id="message">
     {{message}}
  </div>

  <div id="box">
    {{message}}
  </div>


  <select >
    <option v-for="school in schools" :value="school.id">{{school.name}}</option>
  </select>
</div>

</body>
<script src="../../lib/vue.global.js"></script>
<script>
   // var message=  document.getElementById('message');
   // message.innerText='html 原生JavaScript！'

   /**
    *  1. 通过id找到select元素
    *  2. 循环生成 option(dom 元素/对象)
    *    opt createElement('option')
    *    opt.value
    *    opt.text
    *        把生成的 option 追加到 select 中去
    * */

   Vue.createApp({
      data:function (){
         return {
             message:'hello vue!',
             schools:[{
                id:1,
               name:'学校1'
             },{
               id:2,
               name:'学校2'
             }]
         }
      }
   }).mount('#app')

</script>
</html>